<template>
    <div>
      <!--增加仓库-->
      <el-dialog
        :close-on-click-modal="false"
        :beforeClose="handleClose"
        title="仓库信息"
        :visible.sync="dialogVisible"
        width="500px">
        <el-form :model="priceForm" size="mini" label-width="90px"  ref="priceForm" :rules="rules">
          <el-form-item label="仓库名称：" prop="warehouseName">
            <el-input v-model="priceForm.warehouseName" style="width:195px"></el-input>
          </el-form-item>
          <el-form-item label="所在地区："  prop="areaNames">
            <el-cascader
              v-model="priceForm.areaNames"
              :props="{ value: 'areaName',label:'areaName',children:'areaChildList' }"
              :options="options"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address">
            <div style="color:#409EFF;margin-bottom:5px;cursor: pointer;" @click="showMap">
              <i class="el-icon-location-outline"  style="font-size:16px;cursor: pointer;display: inline-block;vertical-align: middle"></i>
              <span style="vertical-align: middle">地图选点定位</span></div>
              <el-input v-model="priceForm.address" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"></el-input>
          </el-form-item>
<!--          <el-form-item label="经纬度：" prop="jxd">-->
<!--            <el-input :disabled="true" style="width:193px;vertical-align: middle" v-model="priceForm.jxd"></el-input>-->
<!--&lt;!&ndash;            <i class="el-icon-location-outline" @click="showMap" style="font-size:20px;cursor: pointer;display: inline-block;margin-left:10px;vertical-align: middle"></i>&ndash;&gt;-->
<!--          </el-form-item>-->
          <el-form-item label="联系人：" prop="contactName">
            <el-input v-model="priceForm.contactName" style="width:130px;"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="contactMobile">
            <el-input v-model="priceForm.contactMobile" style="width:130px;"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="priceForm.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
              </span>
      </el-dialog>
      <gaodeMap @handleConfirm="handleConfirm2" ref="gaodeMap"></gaodeMap>
    </div>
</template>
<script>
    import {warehouseAdd,warehouseEdit} from '@/api/company'
    import {getAddressList,} from '@/api/partner'
    import {validateCommission} from '@/utils/validate';
    import gaodeMap from '@/views/components/gaodeMap'
    const defaultPriceForm={
        warehouseName : "",   //仓库名称
        contactName   : "",   //联系人
        contactMobile : "",   //联系人手机号
        areaNames       : [],    //仓库所在地区
        addresstext:'',       //仓库所在地区字符串
        address      : "",    //仓库所在地址
        remark       : "" ,   //备注
        jxd:'',
        locationLat:'',
        locationLon:'',
    };
    export default {
        name: "warehouseInfo",
        data(){

            return {
                dialogVisible:false,
                priceForm:JSON.parse(JSON.stringify(defaultPriceForm)),
                rules:{
                    warehouseName : [{required: true, message: '请输入仓库名称', trigger: 'blur'},],
                    contactName   : [{required: true, message: '请输入联系人', trigger: 'blur'},],
                    contactMobile :[{required: true, message: '请输入联系人手机号', trigger: 'blur'},],
                    areaNames       : [{required: true, message: '请选择所在地区', trigger: 'change'},],
                    address      : [{required: true, message: '请输入详细地址', trigger: 'blur'},],
                    // jxd:[{required: true, message: '请在地图上标出经纬度', trigger: 'change'},],
                },
                btnLoading : false,
                type:'',
                options:[],
                diQuIds:[],
            }
        },
        computed: {

        },
        components : {
          gaodeMap:gaodeMap
        },
        created() {
            // this.getAddressListData();
        },
        methods:{
          //确认定位地址
          handleConfirm2(adrInfo){
              console.log("adrInfo",adrInfo)
              this.priceForm.areaNames = [adrInfo.province,adrInfo.city ? adrInfo.city :adrInfo.province,adrInfo.district];
              let index = adrInfo.adrText.indexOf(adrInfo.district); // 获取详细地址中 地区的所在字符串的位置
              let address=adrInfo.adrText.substring(index+adrInfo.district.length,adrInfo.adrText.length); //在完整地址中截取出详细地址
              this.priceForm.address = address;
              this.priceForm.jxd = adrInfo.Lng+','+adrInfo.Lat;
              this.priceForm.locationLat = adrInfo.Lat;
              this.priceForm.locationLon = adrInfo.Lng;
          },
          //显示地图
          showMap() {
            console.log("this.priceForm.address",this.priceForm.address)
            console.log("this.priceForm.areaNames",this.priceForm.areaNames)
            this.$refs.gaodeMap.showMap(this.priceForm.areaNames.join('_'),this.priceForm.address)
          },
            //获取省市区列表
            getAddressListData(){
                getAddressList().then((res)=>{
                    this.options = res;
                })
            },
            //显示增加弹窗
            showDialog(type,item){
                this.dialogVisible = true;
                this.getAddressListData();
                this.priceForm = JSON.parse(JSON.stringify(defaultPriceForm));
                this.type = type;
                if(type == 'edit'){
                    this.priceForm.warehouseName = item.warehouseName;
                    this.priceForm.contactName = item.contactName;
                    this.priceForm.contactMobile = item.contactMobile;
                    this.priceForm.areaNames = item.address ? item.address.split("_") : [];
                    this.priceForm.addresstext = item.address;
                    this.priceForm.address = item.addressDetail;
                    this.priceForm.warehouseId = item.warehouseId;
                    this.priceForm.locationLat = item.locationLat;
                    this.priceForm.locationLon = item.locationLon;
                    if(this.priceForm.locationLat && this.priceForm.locationLon){
                      this.priceForm.jxd = item.locationLon + ','+item.locationLat
                    }
                    this.priceForm.remark = item.remark;
                }
            },

            //关闭增加收款弹窗
            handleClose(){
                this.dialogVisible = false;
                this.$refs.priceForm.clearValidate();
            },

            //提交增加收款
            handleConfirm(){
                this.$refs['priceForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let fn = this.type == 'add' ? warehouseAdd : warehouseEdit;
                        let pa = JSON.parse(JSON.stringify(this.priceForm));
                        fn(pa).then((res)=>{
                            this.btnLoading = false;
                            this.dialogVisible = false;
                            if(this.type == 'add'){
                              this.$emit('getList',this.priceForm.warehouseName,res.warehouseId)
                            }else{
                              this.$emit('getList',this.priceForm.warehouseName)
                            }

                        }).catch(()=>{
                            this.btnLoading = false;
                        })
                    }
                })
            },
        },
    }
</script>

<style scoped lang="scss">
    .upload-div{
        text-align: center;
        position:relative;
        #upload{

            opacity: 0;
            position: absolute;
            z-index: 1;
            width:154px;
            height:40px
        }
    }
</style>
